//- start top variable block
block variables

//- custom title and meta tags
if custom_title
	- var title = custom_title;
else
	- var title = "jSlider";

if custom_meta
	- var meta = custom_meta;
else
	- var meta = "jSlider JS example";


//- start main layout
doctype html
html(lang="en")
	head
		meta(charset="utf-8")
		title= title
		meta(name="description" content=meta)
		meta(name="viewport" content="width=device-width, initial-scale=1.0")
		meta(http-equiv="X-UA-Compatible" content="IE=edge")
		meta(name="robots" content="index, follow")
		meta(name="revisit-after" content="7 days")
		meta(name="theme-color" content="#225aa5")
		//- 
			favicons
			- var favicon = "images/favicon/";
			each val in [57, 66, 72, 76, 114, 120, 144, 152, 180]
				link(rel="apple-touch-icon" sizes=val+"x"+val href=favicon+"apple-icon-"+val+"x"+val+".png")
			each val in [16, 32, 96]
				link(rel="icon" type="image/png" sizes=val+"x"+val href=favicon+"favicon-"+val+"x"+val+".png")
			link(rel="icon" type="image/png" sizes="192x192" href=favicon+"android-icon-192x192.png")
			link(rel="manifest" href=favicon+"manifest.json")
			meta(name="msapplication-TileColor" content="#66cc00")
			meta(name="msapplication-TileImage" content=favicon+"ms-icon-144x144.png")
		meta(name="theme-color" content="#66cc00")
		//- css include
		link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700")
		if documentation
			link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css")
		else
			link(rel="stylesheet" href="jSlider.min.css")
		style(type="text/css").
			body {
				font: normal normal 300 16px/24px 'Open Sans', sans-serif;
				margin: 0;
				padding: 0;
				color: #bbb;
				background: #232526;
				background: -moz-radial-gradient(center, ellipse cover,  #232526 0%, #232526 100%);
				background: -webkit-radial-gradient(center, ellipse cover,  #232526 0%,#232526 100%);
				background: radial-gradient(ellipse at center,  #232526 0%,#232526 100%);
			}
			div {
				box-sizing: border-box;
			}
			h1, h2, h3, h4, h5, h6, p {
				margin: 0 0 2rem 0;
				padding: 0;
			}
			h1, h2, h3, h4, h5, h6 {
				font-weight: 400;
				color: #fff;
			}
			ul {
				margin-bottom: 2rem;
			}
			a {
				color: #cddc39;
				text-decoration: none;
				transition: all .325s;
			}
			a:hover {
				color: #000;
				background: #cddc39;
			}
			strong {
				font-weight: 400;
			}
			.top {
				width: 714px;
				padding: 75px 0;
				margin: auto;
			}
			.content {
				width: 700px;
				padding: 50px;
				margin: auto;
			}
			.tv {
				width: 100%;
				margin: 0 auto;
				box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .1);
				border-radius: 7px;
				padding: 7px;
				background: #4c4c4c;
				background: -moz-linear-gradient(-45deg,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
				background: -webkit-linear-gradient(-45deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
				background: linear-gradient(135deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
			}
			.notes {
				padding: 7px;
			}
			.notes h6 {
				color: #666;
				line-height: 1.3;
				font-weight: 400;
				margin-bottom: 0;
			}
			@media (max-width: 713px) {
				.top {
					width: auto;
					padding-top: 0;
					margin: 0;
				}
				.content {
					width: 100%;
				}
				.tv {
					padding: 0;
				}
			}
			
		block css

		//- ga tracking
		// Global site tag (gtag.js) - Google Analytics
		script(async src="https://www.googletagmanager.com/gtag/js?id=UA-29804355-4")
		script.
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());

			gtag('config', 'UA-29804355-4');

	//- start body
	body
		//- main section
		block content
		if home
			.content
				h2 Welcome to jSlider!
				p
					strong jSlider 
					| is an advanced jQuery Slider Plugin which help you to embed a full feature slider on your website within minutes. You will no longer need to write complicated scripts to make the slider run. Thing will now be easy via HTML properties &amp; CSS.
					
				h3 Why jSlider?
				ul
					li It's so 
						strong simple!
					li It's super 
						strong fast &amp; smooth!
					li It's light weight. (Only 3.6KB - gzip &amp; minimized)
					li It supports 
						strong most major browsers (IE8+, FireFox, Chrome, Edge ...)
					li It supports 
						strong touch mobile devices (iOS, Android &amp; Windows Phone) &amp; mouse drag interaction.
					li It supports 
						strong animated content
						|. (5 different animations)
		.content
			h3 More demos / examples of jSlider:
			ul
				li: a(href="index.html") Welcome slider
				li: a(href="edge_to_edge.html") Edge to Edge (Full Width) slider
				li: a(href="background.html") Background slider
				li: a(href="gallery.html") Gallery slider
				li: a(href="animated.html") Slider with animated content (with custom active slide)
				li: a(href="multiple.html") Multiple sliders
				li: a(href="interaction.html") Slider interaction
				li: a(href="activate.html") Use Javascript to create slider
			
			if !documentation
				h3 Documentation
				p
					a(href="documentation.html") Click here 
					| for more details on how to integrate the slider into your web page.
			
			h3 Copyright notice.
			p: strong jSlider 
				| is released under MIT license.
			p All the photos of the 
				strong jSlider 
				| demos / examples are copyrighted to the author of 
				strong jSlider. 
				| You are not permit to use them anywhere else.
		
		//- bootstrap scripts
		script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous")
		script(src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b913780be4d0018")
		if documentation
			script(src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js")
		else
			script(src="jquery.jSlider.min.js")
		block bottom-script
